<html>
    <head>
        <script type="text/javascript" src="dygraph.js"></script>
        <link rel="stylesheet" type="text/css" src="dygraph.css" />
        <meta charset="UTF-8" />
    </head>
    <body>
        <div id="graphdiv2" style="width: 1800px; height: 900px"></div>

        <div
            id="label"
            style="position: absolute; bottom: 50px; left: 100px"
        ></div>
        <script type="text/javascript">
            const a = []
            var b = 0
            var c = 0
            var multiple = []
            var yMaxHeigh = 0

            function customPlotter(e) {
                var g = e.dygraph
                var series = e.seriesIndex
                var ctx = e.drawingContext
                var points = e.allSeriesPoints[series] // 获取全部系列的数据点

                // 计算倍乘数multiple
                if (b === 0) {
                    multiple = drawPoint(e.allSeriesPoints, e.seriesCount)
                    console.log(g.yAxisRanges())
                    g.updateOptions({ valueRange: [1, yMaxHeigh + 100] })
                }

                for (var i = 0; i < points.length; i++) {
                    points[i].yval *= multiple[series]
                    points[i].canvasy = g.toDomCoords(
                        points[i].xval,
                        points[i].yval
                    )[1]
                }

                ctx.beginPath()
                ctx.strokeStyle = e.color
                ctx.lineWidth = 1

                for (let i = 0; i < points.length - 1; i++) {
                    if (i === 0) {
                        ctx.moveTo(points[0].canvasx, points[0].canvasy)
                        continue
                    }
                    var p1 = points[i]
                    var p2 = points[i - 1]

                    if (p1.xval - p2.xval > 1000) {
                        // 如果 x 值的差大于 1000，则跳过绘制，这个地方用来判断横轴坐标是否连续，如果出现由10：00：00直接跳到11：00：00的话，直接跳过绘制
                        ctx.moveTo(p1.canvasx, p1.canvasy)
                        continue
                    }

                    // 判断当前时间点是否有数据，没有数据是''，会在其中显示为NaN，所以需要判断isNaN,如果是没有数据点，则跳过绘制
                    if (isNaN(p2.yval)) {
                        ctx.moveTo(p1.canvasx, p1.canvasy)
                        continue
                    }

                    ctx.lineTo(p1.canvasx, p1.canvasy)
                }

                ctx.stroke()
            }

            // 寻找倍乘目标值
            function drawPoint(allPoints, count) {
                // 寻找每条线中最大的值
                var max = 0
                for (var i = 0; i < count; i++) {
                    for (var j = 0; j < allPoints[i].length; j++) {
                        if (allPoints[i][j].yval > max) {
                            max = allPoints[i][j].yval
                        }
                    }
                    // 使用a数组暂时存储最大值
                    a.push(max)
                    max = 0
                }

                b = 1

                // 计算所有线的最大值的平均值，用c存储
                for (var item of a) {
                    // item指的的就是数组每一项的值
                    max += item
                }

                c = max / count

                yMaxHeigh = (c / Math.max(...a)) * Math.max(...a)

                // 在使用平均值除以最大值得到每条线的倍乘倍数存储在a中
                return a.map(function (item, index) {
                    return c / item
                })
            }

            function showLabel(yval, seriesIndex) {
                // 获取对应的倍乘因子
                var multiplier = multiple[seriesIndex]
                // 将倍乘后的值还原为原始值
                var originalValue = yval / multiplier
                // 返回原始值
                return originalValue.toFixed(2) // 格式化为两位小数
            }

            function draw() {
                Dygraph.onDOMready(function onDOMready() {
                    g2 = new Dygraph(
                        document.getElementById('graphdiv2'),
                        '断点数据.csv', // path to CSV file
                        {
                            title: '测试标题',
                            titleHeight: 100,
                            labelsDiv: document.getElementById('label'),
                            xlabel: '时间',
                            ylabel: '数值',
                            axisLabelWidth: 100,
                            drawPoints: true,
                            // visibility: [b, a, b]
                            displayAnnotations: true,
                            // drawPointCallback: drawPoint,
                            plotter: [customPlotter],
                            hideOverlayOnMouseOut: false,
                            // valueFormatter: showLabel
                        } // options
                    )
                })
            }

            draw()
        </script>
    </body>
</html>
